<template>
    <div>
        <top-simple-search @searchFun="query" @addFun="handleAdd">
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
                    <el-option label="正常" :value="1"/>
                    <el-option label="停用" :value="0"/>
                </el-select>
            </el-form-item>
        </top-simple-search>
        <el-table
                v-loading="loading"
                :data="menuList"
                row-key="id"
                :tree-props="{children: 'children'}"
        >
            <el-table-column align="left" type="index" label="序号" width="60"/>
            <el-table-column align="left" prop="name" label="菜单名称" width="200"/>
            <el-table-column align="left" prop="icon" label="图标" width="80">
                <template slot-scope="{row}">
                    <svg-icon :icon-class="row.icon"/>
                </template>
            </el-table-column>
<!--            <el-table-column align="left" prop="no_order" label="排序" width="80"/>-->
            <el-table-column align="left" prop="web_path" label="路由地址" show-tooltip-when-overflow/>
            <el-table-column align="left" prop="component" label="组件路径" show-tooltip-when-overflow>
            </el-table-column>
            <el-table-column align="left" prop="menuPermission" label="拥有权限" show-tooltip-when-overflow>
                <template slot-scope="{row}"><span v-if="row.menuPermission">{{row.menuPermission.join("，")}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="visible" label="是否显示" width="80">
                <template slot-scope="{row}">{{row.visible?'是':'否'}}</template>
            </el-table-column>
            <el-table-column align="left" prop="status" label="状态" width="80">
                <template slot-scope="{row}">{{row.status?'正常':'停用'}}</template>
            </el-table-column>
            <el-table-column align="left" fixed="right" label="操作" width="360">
                <template slot-scope="{row}">
                    <edit-button @click="handleUpdate(row)"></edit-button>
                    <my-button @click="handleAdd(row)" handle="Create"> 新增</my-button>
                    <delete-button @click="handleDelete(row)"></delete-button>
                    <my-button @click="showButtons(row)" handle="anqx"> 按钮权限</my-button>
                    <my-button @click="copyAndAdd(row)" handle="Create"> 复制新增</my-button>
                    <my-button @click="copyHandle(row)" handle="Create"> 复制权限</my-button>
                </template>
            </el-table-column>
        </el-table>
        <edit-dialog :visible.sync="open" v-if="open" :row="currRow" @reloadList="getList"
                     :menuList="allMenuList"></edit-dialog>
        <copy-handle-dialog :menuList="allMenuList" :visible.sync="copyVisible" v-if="copyVisible" :row="currRow"  @reloadList="getList"></copy-handle-dialog>
    </div>
</template>

<script>
    import menu from "@/api/menuManagement/index";
    import {handleTree} from "@/utils/common";
    import EditDialog from "./dialog/editDialog";
    import XEUtils from "xe-utils";
    import CopyHandleDialog from "./dialog/CopyHandleDialog";

    export default {
        name: "MenuTabContent",
        components: {CopyHandleDialog, EditDialog},
        props:["params"],
        data() {
            return {
                // 遮罩层
                loading: true,
                // 显示搜索条件
                showSearch: true,
                // 菜单表格树数据
                menuList: [],
                allMenuList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    status: undefined,
                    name: ""
                },
                currRow: {...this.params},
                copyVisible:false
            };
        },
        created() {
            console.log("params",this.params);
            this.queryParams = {...this.queryParams,...this.params};
            this.getList();
            this.getAllList();
            // this.getDicts("sys_show_hide").then(response => {
            //     this.visibleOptions = response.data;
            // });
        },
        methods: {
            copyHandle(row){
                this.currRow =row;
                this.copyVisible = true
            },
            showButtonsList(row) {
                this.$router.push({path: `buttonList`});
            },
            showButtons(row) {
                this.$router.push({path: `menuButton`, query: {id: row.id, name: row.name}});
            },
            query(queryData) {
                this.queryParams.name = queryData;
                this.getList()
            },
            getAllList() {
                menu.getList(this.params).then(response => {
                    this.allMenuList = handleTree(response.data, "id", "parent");
                });
            },
            /** 查询菜单列表 */
            getList() {
                this.loading = true;
                menu.getList(this.queryParams).then(response => {
                    this.menuList = handleTree(response.data, "id", "parent");
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 复制并新增 */
            copyAndAdd(row) {
                this.open = true;
                this.currRow = JSON.parse(JSON.stringify(row));
                delete this.currRow.parent;
                delete this.currRow.id;
                console.log("this.currRow",this.currRow)
            },
            /** 新增按钮操作 */
            handleAdd(row) {
                this.open = true;
                this.currRow = {...this.params};
                if (row) {
                    let parent = row.id ? row.id : "";
                    this.currRow = {...this.params,parent: parent}
                }
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.currRow = row;
                this.open = true;
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return menu.deleteMenu(row.id);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(() => {
                });
            }
        }
    };
</script>
